import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Platform,
  ListView,
  RefreshControl,
  InteractionManager,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import MyCustomerItem from '../../containers/MyCustomerContainers';
import Loading from '../Public/Loading';
import LoadMoreFooter from './LoadMoreFooter';
import { fetchMyCustomerList } from '../../actions/SaleListActions';
import EmptyDataPage from '../Public/EmptyDataPage';
import { fetchFilterMy } from '../../actions/SaleChanceFilterAction';

let myIsLoading = true;
let myLoadMore = false;
let myPageIndex = 1;
const myPageSize = 10;
let myCustomerList = [];

class MyCustomer extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource: ds,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchMyCustomerList(myPageIndex, myIsLoading, myLoadMore,
      1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ''));
  }
  onRefreshMy() {
    myPageIndex = 1;
    myIsLoading = true;
    myLoadMore = false;
    myCustomerList = [];
    const { dispatch } = this.props;
    dispatch(fetchMyCustomerList(myPageIndex, myIsLoading, myLoadMore,
      1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ''));
    const FilterObjMy = {};
    dispatch(fetchFilterMy(FilterObjMy)); // 选中的筛选项
  }

  onEndReachedMy() {
    // ListView滚动到底部，根据是否正在加载更多 是否正在刷新 是否已加载全部来判断是否执行加载更多
    if (myCustomerList.length >= this.props.myCustomerListCount || this.props.myIsLoading) {
      myLoadMore = false;
      return;
    }
    myLoadMore = true;
    InteractionManager.runAfterInteractions(() => {
      this.loadMoreDataMy();
    });
  }
  loadMoreDataMy() {
    const { dispatch } = this.props;
    myPageIndex = Number.parseInt(myCustomerList.length / myPageSize, 10) + 1;
    myIsLoading = false;
    dispatch(fetchMyCustomerList(myPageIndex, myIsLoading, myLoadMore,
      1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ''));
  }

  render() {
    myCustomerList = this.props.myCustomerData;
    return (
      <View style={[style.wrapper, style.flex]}>
        {
            this.props.myIsLoading ?
              <Loading /> :
              myCustomerList && myCustomerList.length > 0
              ?
                <ListView
                  dataSource={this.state.dataSource.cloneWithRows(myCustomerList)}
                  enableEmptySections
                  onEndReachedThreshold={10}
                  renderRow={(rowData, sectionId, rowId) => {
                    if (this.props.myIsLoading) {
                      return null;
                    }
                    return (<MyCustomerItem
                      navigator={this.props.screenProps}
                      saleData={rowData}
                      rowId={rowId}
                      username={rowData.username}
                      online={rowData.online}
                    />);
                  }
                 }
                  onEndReached={() => this.onEndReachedMy()}
                  refreshControl={
                    <RefreshControl
                      refreshing={this.props.myIsLoading}
                      onRefresh={() => this.onRefreshMy()}
                      tintColor="gray"
                      color={[style.white, style.white, style.white]}
                      progressBackgroundColor="gray"
                    />
                  }
                  renderFooter={() => {
                    if (myCustomerList) {
                      if (myCustomerList.length < 1 || this.props.myIsLoading) {
                        return null;
                      }
                    }
                    const isLoadAll = myCustomerList.length < this.props.myCustomerListCount;
                    return (<LoadMoreFooter
                      navigator={this.props.navigator}
                      isLoadAll={isLoadAll}
                    />);
                  }
                  }
                />
              :
                <EmptyDataPage />
        }
      </View>
    );
  }
}
const style = StyleSheet.create({
  wrapper: {
    marginTop: Platform.OS === 'ios' ? PxToDp(3) : 0,
    backgroundColor: '#F5F5F5',
  },
  flex: {
    flex: 1,
  },
});
export default MyCustomer;
